
<!-- 
 微信小程序 易租成 首页代码备份

-->
<template>
	<custom-page>
		<custom-navbar title="首页"></custom-navbar>

		<view class="swiper common-margin">
			<u-swiper height="695" border-radius="20" bg-color="#F3F4F6" :list="bannerList" @click="bannerClick"></u-swiper>
		</view>
		<view class="common-margin u-flex u-row-between">
			<view class="main-module" @click="tosecurity">
				<image :src="$staticImg('/static/images/page/index/img-security.png')"></image>
			</view>
			<view class="main-module" @click="$u.toast('模块暂未开放')">
				<image :src="$staticImg('/static/images/page/index/img-lease.png')"></image>
			</view>
		</view>
		<template v-if="hasStatistics">
			<view class="u-m-t-50 u-m-b-40">
				<title-left-right title="当月统计"></title-left-right>
			</view>
			<view class="u-flex u-row-between total-list">
				<view class="total-item">
					<view class="value">{{ statistics.newTenant }}</view>
					<view class="label">新增房屋租客</view>
				</view>
				<view class="total-item">
					<view class="value warning">{{ statistics.signOutTenant }}</view>
					<view class="label">新增注销租客</view>
				</view>
			</view>
			<view class="u-flex u-row-between total-list no-m-b">
				<view class="total-item">
					<view class="value warning">{{ statistics.abnormalUser }}</view>
					<view class="label">异常人员数</view>
				</view>
				<view class="total-item">
					<view class="value warning">{{ statistics.abnormalDevice }}</view>
					<view class="label">异常设备数</view>
				</view>
			</view>
			<view class="u-m-t-50 u-m-b-40">
				<title-left-right title="汇总统计"></title-left-right>
			</view>
			<view class="u-flex u-row-between total-list">
				<view class="total-item">
					<view class="value">{{ statistics.tenementTotal }}</view>
					<view class="label">房屋总数</view>
				</view>
				<view class="total-item">
					<view class="value">{{ statistics.landlordTotal }}</view>
					<view class="label">房东总数</view>
				</view>
			</view>
			<view class="u-flex u-row-between total-list">
				<view class="total-item">
					<view class="value">{{ statistics.tenantTotal }}</view>
					<view class="label">租客总数</view>
				</view>
				<view class="total-item">
					<view class="value">{{ statistics.deviceTotal }}</view>
					<view class="label">设备总数</view>
				</view>
			</view>
		</template>
		<custom-tabbar></custom-tabbar>
	</custom-page>
</template>

<script>
	import mpShare from 'uview-ui/libs/mixin/mpShare.js'
	// let mpShare = require('uview-ui/libs/mixin/mpShare.js')
	
	export default {
		mixins: [mpShare],
		
		data() {
			return {
				bannerList: [],
				statistics: {
					newTenant: 0,
					signOutTenant: 0,
					abnormalUser: 0,
					abnormalDevice: 0,
					tenementTotal: 0,
					landlordTotal: 0,
					tenantTotal: 0,
					deviceTotal: 0,
				},
			}
		},
		computed: {
			// 管理员才显示
			hasStatistics() {
				return this.isAdmin
			},
		},
		methods: {
			// 查询轮播图列表
			queryBanner() {
				this.$u.api.common.banner().then(({
					data
				}) => {
					if (data.success) {
						this.bannerList = data.data.map(item => {
							return {
								image: item.bannerUrl,
								title: item.title,
							}
						})
					}
				})
			},
			// 轮播图点击
			bannerClick(index) {
				this.$previewImgs([this.bannerList[index].image], 0)
			},
			// 查询统计记录
			queryStatistics() {
				this.$u.api.common.statistics().then(({
					data
				}) => {
					if (data.success) {
						this.statistics = {
							newTenant: data.data.tenantIncreaseCountByMonth,
							signOutTenant: data.data.tenantDecreaseCountByMonth,
							abnormalUser: data.data.warningUserCountByMonth,
							abnormalDevice: data.data.offlineDeviceCount,
							tenementTotal: data.data.totalHouses,
							landlordTotal: data.data.totalOwners,
							tenantTotal: data.data.totalTenants,
							deviceTotal: data.data.totalDevices,
						}
					}
				})
			},
			// 查询统计数据（管理员与网格员）
			tosecurity() {
				if (this.isTenant) {
					this.$pushRouter('securityTenant')
				} else {
					this.$pushRouter('security')
				}
			},
		},
		onShow() {
			this.hasStatistics && this.queryStatistics()
		},
		onLoad() {
			this.queryBanner()
		},
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}
</style>

<style lang="scss">
	.swiper {
		box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 20rpx;
	}

	.main-module {
		line-height: 0;
		box-shadow: 0rpx 0rpx 31rpx 3rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
		background: #FFFFFF;

		image {
			width: 314rpx;
			height: 444rpx;
		}
	}

	.total-list {
		margin: 0 $uni-page-m-l $uni-page-m-b;

		&.no-m-b {
			margin-bottom: 0;
		}
	}

	.total-item {
		width: 314rpx;
		height: 200rpx;
		text-align: center;
		color: $uni-color-paragraph;
		background: #FFFFFF;
		box-shadow: inset 0 0 40rpx rgba(28, 202, 224, 0.4);
		border-radius: 20rpx;

		.value {
			padding-top: 40rpx;
			padding-bottom: 10rpx;
			font-weight: 500;
			font-size: 60rpx;

			&.warning {
				color: $uni-color-warning;
			}
		}

		.label {
			font-size: 36rpx;
		}
	}
</style>